<div class="mx-auto mt-6 text-center dark:text-gray-300">
  <h1 class="text-3xl font-black">Register your 30-day unlimited-use free trial</h1>
  <div class="text-xl font-medium">Set up privacy-friendly analytics with just a few clicks</div>
</div>


<div class="w-full max-w-3xl mt-4 mx-auto flex">
  <%= form_for @conn, "/claim-activation", [class: "w-full max-w-lg mx-auto bg-white dark:bg-gray-800 shadow-md rounded px-8 py-6 mb-4 mt-8", id: "register-form"], fn f -> %>
    <h2 class="text-xl font-black dark:text-gray-100">Activate your account</h2>

    <div class="mt-2 text-sm text-gray-500 dark:text-gray-200 leading-tight">
      Please enter the 4-digit code we sent to <b><%= @email %></b>
    </div>

    <div class="mt-12 flex items-stretch flex-grow">
			<div>
				<%= text_input f, :code, class: "tracking-widest font-medium shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-36 px-8 border-gray-300 dark:border-gray-500 rounded-l-md dark:text-gray-200 dark:bg-gray-900", oninput: "this.value=this.value.replace(/[^0-9]/g, ''); if (this.value.length >= 4) document.getElementById('submit').focus()", onclick: "this.select();", maxlength: "4", placeholder: "••••", style: "letter-spacing: 10px;" %>
				<%= error_tag f, :name %>
			</div>
			<button id="submit" class="button rounded-l-none">Activate &rarr;</button>
    </div>

    <div class="mt-16 text-sm">
      Didn't receive an email?
    </div>
    <div class="mt-2 text-sm text-gray-500 leading-tight">
      Please check your spam folder and contact <a class="underline text-indigo-500" href="mailto:support@plausible.io">support@plausible.io</a> if the problem persists
    </div>
  <% end %>

  <div class="pt-12 pl-8 hidden md:block">
    <%= render(PlausibleWeb.AuthView, "_onboarding_steps.html", current_step: 1) %>
  </div>
</div>
